<template>
  <div >
    <div 
         id="order_top"><i 
         class="van-icon van-icon-arrow-left">
        <!----></i>
      <p >确认订单</p>
      <p ></p>
    </div>
    <div 
         id="order_neirong">
      <div 
           class=""><i 
           class="van-icon van-icon-location-o">
          <!----></i>
        <div @click="goAddressList">
          <p >
            <span >{{ address.linkMan}} </span>
            <span >{{ address.mobile}} </span>
         </p>
            <p >{{ address.address}} </p>
        </div> 
        <i class="van-icon van-icon-arrow">
          <!----></i>
      </div>
      <!----> <img 
           src=""
           alt="">
      <p >商品列表</p>
      <ul >
        <li v-for="item in $store.getters.order"  :key = "item.id" >
            <img :src="item.pic" alt=""/>
          <div >
            <p>
                {{ item.name }}
            </p>
            <p >
                <span v-for="p in item.pro" :key="p.id">
                    {{ p.name }}
                </span>
            </p>
          </div>
          <div >
            <p >￥{{ item.price }}</p>
            <p >x{{ item.num}}</p>
          </div>
        </li>
      </ul>
      <!---->
      <div >
        <p >配送方式</p>
        <p >快递</p>
      </div>
      <div ><label 
               for="cont">备注</label> <input 
               type="text"
               placeholder="如需备注请输入"></div>
      <p ></p>
      <div >
        <p >商品金额</p>
        <p >￥{{ $store.getters.hj | capitalize }}</p>
      </div>
    </div>
    <div 
         id="order_foot">
      <p >合计: ￥{{ $store.getters.hj | capitalize }}</p>
      <p @click="sub">提交订单</p>
    </div>
  </div>
</template>

<script>
import qs from "qs"
export default {
  components: {},
  props: {},
  data() {
    return {
        address:{}
    }
  },
  watch: {},
  computed: {},
  methods: {
      goAddressList(){

           this.$router.push("/addresslist")
      },
      sub(){


          var re =this.$store.getters.order.map((item)=>{
                var  obj = {}
                var str = []
                obj.goodsId = item.id
                obj.number = item.num
                 
                 item.pro.forEach(element => {
                    str.push(element.propertyId + ":" + element.id)  
                 });

                obj.propertyChildIds = str.join(",")

                return obj

           })

           console.log(re)

           // https://api.it120.cc/small4/order/create
           // token goodsJsonStr
           var token = localStorage.getItem("token");
           if(token == null){

                this.$router.push("/login")
           }
            re = JSON.stringify(re)
            var d = {
                 "token":token,
                 "goodsJsonStr":re
           }
          
          var d1 = qs.stringify(d)

          this.http.post("https://api.it120.cc/small4/order/create",d1).then((msg)=>{

                  console.log(msg)
                  if(msg.data.msg == "success"){

                      // this.$store.commit("")  把购物车中checked 是true那些商品 删掉
                      this.$router.push({name:"pay",query:{ordernum:msg.data.data.orderNumber,price:msg.data.data.amount}})
                  
                  }

          })

      }
  },
  created() {

      console.log(localStorage.getItem("token"))
        
         this.http.get("https://api.it120.cc/small4/user/shipping-address/default?token="+localStorage.getItem("token")).then((msg)=>{

               console.log(msg)
               if(msg.data.msg == "success"){

                     this.address = msg.data.data
               }

         })

  },
  mounted() {}
}
</script>
<style lang="less">
#order_top {
  display: flex;
  padding: 0 0.3rem;
  width: 4.6rem;
  height: 0.76rem;
  background: white;
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  i {
    font-size: 0.26rem;
  }
  p {
    font-size: 0.2rem;
  }
}
#order_neirong {
  // width: 4.8rem;
  padding-top: 0.76rem;
  padding-bottom: 0.7rem;
  // padding: 0.76rem 0.2rem 0.7rem 0.2rem;
  > div:nth-of-type(1) {
    display: flex;
    align-items: center;
    align-items: center;
    height: 1.1rem;
    padding: 0 0.2rem;
    > p:nth-of-type(1) {
      width: 0.44rem;
      height: 0.44rem;
      border-radius: 0.06rem;
      text-align: center;
      // line-height: 0.44rem;
      background: #3283f9;
      i {
        font-size: 0.2rem;
        color: white;
        margin-top: 0.13rem;
      }
    }
    > i:nth-of-type(1) {
      font-size: 0.24rem;
      color: #dbdadf;
    }
    > div {
      width: 4.13rem;
      height: 0.58rem;
      margin-left: 0.32rem;
      > p:nth-of-type(1) {
        span {
          font-size: 0.18rem;
        }
      }
      > p:nth-of-type(2) {
        margin-top: 0.28rem;
        font-size: 0.16rem;
        color: grey;
      }
    }
    > i:nth-of-type(2) {
      font-size: 0.26rem;
      color: #dbdadf;
    }
  }
  > img:nth-of-type(1) {
    width: 100%;
    height: 0.02rem;
    display: block;
  }
  > p:nth-of-type(1) {
    height: 0.65rem;
    padding: 0 0.2rem;
    line-height: 0.65rem;
    font-size: 0.16rem;
    border-top: 0.13rem solid #f5f5f5;
    border-bottom: 2px solid #e8e8e8;
  }
  > ul {
    border-bottom: 0.15rem solid #f5f5f5;
    li {
      height: 1.53rem;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      align-items: center;
      > img {
        width: 1.12rem;
        height: 1.12rem;
        display: block;
        margin-left: 0.2rem;
      }
      > div:nth-of-type(1) {
        margin-left: 0.12rem;
        width: 3.06rem;
        height: 1.12rem;
        > p:nth-of-type(1) {
          font-size: 0.18rem;
          margin-top: 0.1rem;
        }
        > p:nth-of-type(2) {
          font-size: 0.18rem;
          margin-top: 0.55rem;
          color: #999;
        }
      }
      > div:nth-of-type(2) {
        height: 1.34rem;
        > p:nth-of-type(1) {
          font-size: 0.18rem;
          margin-top: 0.1rem;
        }
        > p:nth-of-type(2) {
          font-size: 0.18rem;
          margin-top: 0.6rem;
          margin-left: 0.29rem;
          color: #999;
        }
      }
    }
  }
  > div:nth-of-type(2) {
    height: 0.6rem;
    padding: 0 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.18rem;
    border-bottom: 0.01rem solid #e5e5e5;
  }
  > div:nth-of-type(3) {
    height: 0.59rem;
    padding: 0 0.2rem;
    display: flex;
    align-items: center;
    > label {
      font-size: 0.18rem;
    }
    > input {
      width: 3.1rem;
      height: 0.2rem;
      font-size: 0.18rem;
      color: #333;
      margin-left: 0.76rem;
      border: none;
    }
  }
  > p:nth-of-type(2) {
    width: 0%;
    height: 0.01rem;
    background: #0098e9;
    transition: all 1s;
    margin: 0 auto;
  }
  > div:nth-of-type(4) {
    height: 0.64rem;
    padding: 0 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 0.15rem solid #f5f5f5;
    border-bottom: 0.15rem solid #f5f5f5;
    > p:nth-of-type(1) {
      font-size: 0.18rem;
    }
    > p:nth-of-type(2) {
      font-size: 0.18rem;
    }
  }
}
#order_foot {
  width: 100%;
  background: white;
  height: 0.69rem;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > p:nth-of-type(2) {
    width: 1.73rem;
    height: 0.69rem;
    background: #b7282e;
    color: white;
    font-size: 0.22rem;
    text-align: center;
    line-height: 0.69rem;
  }
  > p:nth-of-type(1) {
    font-size: 0.2rem;
    color: #d00000;
    line-height: 0.69rem;
    margin-left: 2rem;
  }
}
</style>